import { DrawerForm, ProColumns, ProTable } from '@ant-design/pro-components';
import ProForm, {
  ModalForm,
  ProFormGroup,
  ProFormInstance,
  ProFormSwitch,
  ProFormTextArea,
} from '@ant-design/pro-form';
import React, { useRef } from 'react';
import * as api from '@/services/vpnServer';

type FormProps = {
  visible: boolean;
  onCancel: () => void;
};

const Form: React.FC<FormProps> = (props) => {
  const { visible, onCancel } = props;
  if (!visible) {
    return <></>;
  }

  // const actionRef = useRef<ActionType>();
  // const formRef = useRef<ProFormInstance>();


  const netConfigColumns: ProColumns<API.VpnServerSyncIp>[] = [
    {
      title: '实例ID',
      dataIndex: 'instanceId',
      width: 100,
    },
    {
      title: '分组',
      dataIndex: 'groupNames',
      width: 200,
    },
    {
      title: '老IP',
      dataIndex: 'oldIp',
      width: 120,
    },
    // {
    //   title: '新IP',
    //   dataIndex: 'newIp',
    // },
    {
      title: '新IP',
      dataIndex: 'newIp',
      width: 120,
      render: (_, record) => {
        return (
        record.newIp ?
        <>{record.newIpBlack == true ? <b style={{color:'red'}}>{record.newIp}</b> : record.newIp}</>
        :''
        );
      },
    },
    {
      title: '新IP地理信息',
      dataIndex: 'newIp',
      width: 300,
      render: (_, record) => {
        return (
        record.newIpCountry ?
        <>{record.newIpCountry} {record.newIpProvince} {record.newIpNetwork}</>
        :''
        );
      },
    },
    {
      title: '服务器备注',
      dataIndex: 'serverRemark',
      valueType: 'textarea',
      ellipsis: true,
    },
  ];

  return (
    <DrawerForm<API.VpnServerSyncIp>
      open={visible}
      title='同步IP'
      // formRef={formRef}
      autoFocusFirstInput
      width={1200}
      drawerProps={{
        onClose: onCancel,
        maskClosable: false,
      }}
      submitter={{
        render: (props, defaultDoms) => {
          return [defaultDoms[0]];
        },
      }}
    >
        <ProTable<API.VpnServerSyncIp>
          rowKey="instanceId"
          locale={{ emptyText: '暂无数据' }}
          toolBarRender={false}
          columns={netConfigColumns}
          pagination={false}
          search={false}
          request={api.syncIps}
        />
    </DrawerForm>
  );
};

export default Form;
